<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片编辑</title>
</head>
<link rel="stylesheet" href="indexv3.css">
<link rel="stylesheet" href="cropper.min.css">
<style>
    #cropper{
        width:200px;
        height: 200px;
        z-index: 9999;
        box-sizing: border-box;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        position: absolute;
        border:1px solid #fff
    }
</style>
<body>
      <div class="navbar"> 
            <span class="copy">合成</span>
            <span class="cutout">裁切</span>
            <span class="clean">清空</span>
            <span class="home">返回</span>
            
            
      </div> 
      <!-- 裁剪工具 -->
      <!-- <div id="cropper"></div>    -->
    <div class="wrapper">
        <!-- 展示用的canvas -->
        <canvas id="canvasClip"></canvas>
        <canvas id="canvas"></canvas>
        
    </div>
    <div class="btn">
        <div class="move">
            <img src="./icon/move.png" alt="" class="active">
            <img src="./icon/move_active.png" alt="" class="disActive">
        </div>
        <div class="pen">
            <img src="./icon/pen.png" alt="" class="active">
            <img src="./icon/pen_active.png" alt="" class="disActive">
        </div>
        <div class="clip">
            <img src="./icon/clip.png" alt="" class="active">
            <img src="./icon/clip_active.png" alt="" class="disActive">
        </div>
        <div class="large">
            <img src="./icon/enlarge.png" alt="" class="active">
            <img src="./icon/enlarga_active.png" alt="" class="disActive">
        </div>
        <div class="small">
            <img src="./icon/reduce.png" alt="" class="active">
            <img src="./icon/reduce_active.png" alt="" class="disActive">
        </div>
        <div class="rubber">
            <img src="./icon/rubber.png" alt="" class="active">
            <img src="./icon/rubber_active.png" alt="" class="disActive">
        </div>
    </div>  

    <!-- 笔画滑块 -->
    <div class="penList_wrapper">
        <div class="penList_state_small" data-size="small"></div>
        <div class="penList_state_middle" data-size="middle"></div>
        <div class="penList_state_large" data-size="large"></div>
        <div class="penList_state_huge" data-size="huge"></div>
    </div>

    <!-- 橡皮滑块 -->
    <div class="rubberList_wrapper">
        <div class="rubberList_state_small" data-size="small"></div>
        <div class="rubberList_state_middle" data-size="middle"></div>
        <div class="rubberList_state_large" data-size="large"></div>
        <div class="rubberList_state_huge" data-size="huge"></div>
    </div>

    <!-- 合成画笔和背景图片用的canvas 不显示 -->
    <canvas id="compose"></canvas>
    <!-- 裁剪合成用的canvas不展示 -->
    <canvas id="composeClip"></canvas>
    <!-- <canvas id="cropperCanvas"></canvas> -->
    <div class="layer">
        <div class="lay-download">加载中...</div>
        <div class="layer-loading">
            <span>上传中...</span>
        </div>
        <div class="layer-message"></div>
    </div>
</body>
</html>
<script src="./js/vconsole.min.js"></script>
<script src="./js/zepto.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="./js/cropper.min.js"></script>
<script src="./js/canvas2image.js"></script>
<script>

document.write("<script type='text/javascript' src='./build/painter.js?v=" + Date.now() + "'><\/script>");
</script>